<template>
  <div class="header">
    <div class="title">
      <img src="../../assets/路径1745.png" @click="handleClick" />
    </div>
    <div class="timer">{{ formattedDate }}</div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getLunar } from "chinese-lunar-calendar";
const emits = defineEmits(["click"]);
const formattedDate = ref("");
const weekDays = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
const handleClick = () => {
  emits("click");
};
const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const oldYear = getLunar(
    now.getFullYear(),
    now.getMonth() + 1,
    now.getDate()
  );
  const month = (now.getMonth() + 1).toString().padStart(2, "0");
  const day = now.getDate().toString().padStart(2, "0");
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  const seconds = now.getSeconds().toString().padStart(2, "0");
  const dayOfWeek = weekDays[now.getDay()];
  formattedDate.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${dayOfWeek} 农历${oldYear.dateStr}`;
};
onMounted(() => {
  updateTime();
  setInterval(() => {
    updateTime();
  }, 1000);
});
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 101px;
  background-image: url("../../assets/组 7634.png");
  .title {
    width: min-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 24px;
    img {
      position: relative;
      left: 15px;
    }
  }
  .timer {
    position: absolute;
    right: 42px;
    top: 22px;
    height: 22px;
    font-size: 16px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
